<template>
  <div>
    <crud-form
      :field-list="fieldList"
      :showColumnSetting="false"
      tableOptionWidth="150"
      :exportFn="exportFn"
      :api="cx"
      :queryParam="formInline"
      ref="crudForm"
    >
      <template slot="searchBar">
        <topform ref="topform" :queryParam="formInline" />
      </template>

      <template slot="tableTopOptionLeft">
        <erji ref="erji" />
      </template>
      <template slot="tableTopOptionRight">
<!--        <el-button @click="daoru" size="mini" class="listBTN newButtonColor">批量导入</el-button>-->
        <el-upload
          action
          class="upload-demo"
          :http-request="fileImport"
          :file-list="fileList">
          <el-button size="small" type="primary">批量导入</el-button>
        </el-upload>
<!--        <input type="file" id="files" style="position:absolute;left:-10000px" @change="fileImport" />-->
      </template>

      <template slot="tableOption" slot-scope="{ index, row }">
        <el-button @click="modify(row)" class="common-btn">修改</el-button>
        <el-button @click="remove(row.id)" class="delete-btn">删除</el-button>
      </template>
    </crud-form>
  </div>
</template>

<script>
import crudForm from "@/components/crudForm/index";
import topform from "./components/environment/topform";
import erji from "./components/environment/erji";
import { cx, menuDelete } from "@/api/system/environment";
import { DICTDATA, translatorDict } from "../../api/dict";

export default {
	name:'system-environment',
  data() {
    let formatterAirQua = (row) => {
      return translatorDict(DICTDATA.AIR_QUALITY, Number(row.airQua));
    };
    let types = (row) => {
      return translatorDict(DICTDATA.STATION_TYPE_S, Number(row.siteType));
    };
    let nameIsShow = (row) => {
      if (row.siteName !== null) {
        return row.siteName;
      } else {
        row.siteName = row.regName;
        return row.siteName;
      }
    };
    let formatWeather = (row) => {
      return translatorDict(DICTDATA.WEATHER, Number(row.weather));
    };
    return {
      fileList:[],
      formInline: {siteType:1},
      cx,
      fieldList: [
        { name: "日期", value: "recDate" },
        { name: "天气", value: "weather", formatter: formatWeather },
        { name: "类型", value: "siteType", formatter: types },
        { name: "区域名称", value: "siteName", formatter: nameIsShow },
        { name: "最低温(℃)", value: "minTemp", width: "115" },
        { name: "最高温(℃)", value: "maxTemp", width: "115" },
        { name: "湿度（%）", value: "humidity" },
        { name: "PM2.5", value: "pm25" },
        { name: "空气质量", value: "airQua", formatter: formatterAirQua },
      ],
    };
  },
  components: { topform, erji, crudForm },

  methods: {
    // 导出
    exportFn() {},
    // 修改
    modify(row) {
      let erji = this.$refs.erji;
      erji.title = "修改";
      erji.add = true;
      if (row.siteType === 1) {
        erji.siteFlag = true;
        erji.regFlag = false;
      }
      if (row.siteType === 2) {
        erji.regFlag = true;
        erji.siteFlag = false;
      }
      erji.ruleForm = row;
      erji.ruleForm.airQua = Number(row.airQua)
    },
    // 删除
    remove(id) {
      this.$confirm("确认删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "messagebox-button",
		cancelButtonClass: "messagebox-button"
      }).then(() => {
        menuDelete(id)
          .then((res) => {
            if (res.data && res.code === "000000") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.$refs.crudForm.getDataInit();
            } else {
              this.$message.error("删除失败");
            }
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      });
    },
    //批量导入
    daoru() {
      var selectedFile = document.getElementById("files");
      selectedFile.click();
    },
    fileImport(file) {
      //获取读取我文件的File对象
      // var selectedFile = document.getElementById("files").files[0];
      var selectedFile = file.file;
      var reader = new FileReader(); //这是核心,读取操作就是由它完成.
      reader.readAsText(selectedFile); //读取文件的内容,也可以读取文件的URL
      reader.onload = function () {
        //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
        var selectedFile = document.getElementById("files");
        let obj = {
          filePath: selectedFile.value,
          startIndex: "1",
        };
        dr(obj)
          .then((res) => {
            this.$message({
              message: "导入成功",
              type: "success",
            });
            this.fileList = []
          })
          .catch((err) => {
            this.$message.error("导入失败");
          });
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.div {
  width: 100%;
  height: 100%;
}
 /deep/ .search-wrap{
 padding: 0 !important;
  }

</style>
